layui.use(['jquery','form','layer'],function () {
    var $ = layui.$;
    var layer = layui.layer;
    //验证码生成
    let canvas=document.getElementById('canvas')//画布对象

    let show_num=[]//装验证码的数组
//产生随机颜色
    function randomColor(){
        var r=  Math.floor( Math.random()*256);
        var g=  Math.floor( Math.random()*256);
        var b=  Math.floor( Math.random()*256);
        return  "rgb("+r+","+g+","+b+") "
    }
//画布
    function draw(show_num){
        let canvas_clientWidth=document.getElementById('canvas').clientWidth//画布长度
        let canvas_clientHeight=document.getElementById('canvas').clientHeight//画布高度
        let context = canvas.getContext("2d")//画布环境 创建 context 对象：
        canvas.width=canvas_clientWidth
        canvas.height=canvas_clientHeight
        let str="A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";
        let  astr=str.split(',');//分割字符串形成数组
        let sLength=astr.length;//数组长度
        for (let i = 0; i <= 3; i++) {
            let j=Math.floor(Math.random()*sLength);//随机索引
            let deg=Math.random()*30*Math.PI/180;//0-30随机弧度
            let text=astr[j];//随机字符
            show_num[i]=text//验证码字符数组
            let x=10+i*20//x坐标
            let y=20+Math.random()*8//y坐标
            //位移 旋转角度 颜色 文字 样式开始位置
            context.font='bold 23px 微软雅黑'
            context.translate(x, y);
            context.rotate(deg);
            context.fillStyle = randomColor();
            context.fillText(text,0,0)
            context.rotate(-deg)
            context.translate(-x,-y)
        }
        //验证码显示小点
        for(let i=0;i<=10;i++){
            context.strokeStyle=randomColor()//设置随机色用小点的颜色
            context.beginPath();//开始一条路径
            let m=Math.random()*canvas_clientWidth;
            let n=Math.random()*canvas_clientHeight;
            context.moveTo(m,n)//移动
            context.lineTo(m + 1, n + 1);//添加一个新点，然后在画布中创建从该点到最后指定点的线条
            context.stroke();//画上面定义好的路径
        }
        //验证码显示线条
        for (let i = 0; i < 1; i++) {
            context.strokeStyle=randomColor()
            context.beginPath()
            context.moveTo(Math.random()*canvas_clientWidth,Math.random()*canvas_clientHeight);
            context.lineTo(Math.random()*canvas_clientWidth,Math.random()*canvas_clientHeight)
            context.stroke()

        }

    }
    draw(show_num)
    show(show_num);
    function show(show_num){
        let str = '';
        for (let i = 0; i < show_num.length; i++) {
            str += show_num[i];
        }
        $('#verification').val(str);
    }
    canvas.onclick=()=>{
        draw(show_num)
        show(show_num);
    }
    $('#loginButton').click(function () {
        var account = $('input[name=account]').val();
        var password = $('input[name=password]').val();
        var verificationCode = $('input[name=verificationCode]').val();
        if(account == null || account == '' || account == undefined){
            layer.msg('账号不能为空', {
                time: 1000
            });
        }else if(password == null || password == '' || password == undefined){
            layer.msg('密码不能为空', {
                time: 1000
            });
        }else if(verificationCode == null || verificationCode == '' || verificationCode == undefined){
            layer.msg('验证码不能为空', {
                time: 1000
            });
        }else{
            var verification = $('#verification').val();
            if(verification.toLowerCase() === verificationCode.toLowerCase()){
                $('#loginSiYun').click();
            }else{
                layer.msg('验证码不正确,请重新输入', {
                    time: 1000
                });
                draw(show_num)
                show(show_num);
            }
        }

    })
})

